<template>
    <van-list :loading="loading" :finished="finished" finished-text="没有更多了" :offset="20" @load="onLoad">
        <div class="list-box">
            <ul class="left-box">
                <li class="goods-box" v-for="item in lftList" :key="item.proid" @click="goDetail">
                    <van-image class="img" :src="item.img1">
                        <!-- <template v-slot:error>加载失败</template> -->
                    </van-image>
                    <p class="van-multi-ellipsis--l2 pname">{{ item.proname }}</p>
                    <p class="jiage">¥{{ item.originprice }}</p>
                </li>
            </ul>
            <ul class="right-box" @click="goDetail">
                <li class="goods-box" v-for="item in rgtList" :key="item.proid">
                    <van-image class="img" :src="item.img1">
                        <template v-slot:error>加载失败</template>
                    </van-image>
                    <p class="van-multi-ellipsis--l2 pname">{{ item.proname }}</p>
                    <p class="jiage">¥{{ item.originprice }}</p>
                </li>
            </ul>
        </div>

    </van-list>
    <MyTop :size="40" name="home-o" color="red" bgcolor="skyblue" />
</template>

<script>
import MyTop from './MyTop.vue'
export default {
    props: ['proid'],
    data() {
        return {
            list: [],
            count: 1,
            limitNum: 10,
            loading: false,
            finished: false,

        }
    },
    components: {
        MyTop
    },
    created() {
        this.getImgs()
    },
    computed: {
        lftList: function () {
            return this.list.filter((item, index) => index % 2 == 0)
        },
        rgtList: function () {
            return this.list.filter((item, index) => index % 2 == 1)
        }
    },
    methods: {
        onLoad() {
            console.log('onLoad');
            if (this.loading || this.finished) {
                return
            }
            // console.log('发送请求');
            this.count++
            this.getImgs()
        },
        getImgs() {
            this.loading = true
            this.$http.get('/pro/list', {
                params: {
                    count: this.count,
                    limitNum: this.limitNum
                }
            }).then(res => {
                if (res.data.code === '200') {
                    if (res.data.data.length == 0) {
                        this.finished = true
                        return
                    }
                    this.list.push(...res.data.data)
                    this.$nextTick(() => {
                        // console.log('回调函数被调用了,渲染到页面上了');
                        this.loading = false
                    })
                }
            })
        },
        goDetail() {
            this.$router.push({
                name: 'MyDetail',
                params: 'proid'
            })
        }
    }
}
</script>
<style scoped>
.list-box {
    display: flex;
    justify-content: space-around;
}

.left-box,
.right-box {
    width: 45%;
}

.left-box .img,
.right-box .img {
    width: 100%;
    border-radius: 15px;
}

.goods-box {
    background-color: #fff;
    margin-top: 20px;
    border-radius: 15px;
}

.pname {
    font-size: 14px;
    line-height: 20px;
}

.jiage {
    font-size: 20px;
    color: #FF6666;
}
</style>